<template>
  <div class="orderlist-container">
    <!-- 搜索框 -->
    <el-input v-model="searchKey" size="small" class="search" placeholder="搜索订单">
      <template #prefix>
        <el-icon class="el-input__icon">
          <search />
        </el-icon>
      </template>
    </el-input>
    <div class="order-list-container">
<!-- 订单列表 -->
      <el-auto-resizer>
        <template #default="{ height }">
          <el-scrollbar max-height="700px">
            <div class="message-list-box">
              <ul>
                <li v-for="(item, index) in orderList" :key="index">
                  <OrderItem :goodNo="item.goodNO" :orderNo="item.orderNo" :goods-cover="item.goodsCover"
                    :goods-name="item.goodsName" :amount="item.amount" :finish="item.finish" :date="item.date" />
                </li>
              </ul>
            </div>
          </el-scrollbar>
        </template>
      </el-auto-resizer>
    </div>
  </div>
</template>
<script setup>
import { reactive, ref } from "vue";
import { Search } from "@element-plus/icons-vue";
import OrderItem from "@/views/customer/components/OrderItem.vue";

const searchKey = ref();
const orderList = reactive([
  {
    goodNO: 1,
    orderNo: "154615133114534135",
    date: "2023-07-28 21:15:16",
    goodsCover: "https://img13.360buyimg.com/n1/jfs/t1/138296/24/38090/145185/64c38c3aF568cba9c/32db385165ef0927.jpg",
    goodsName: "舒肤佳香皂 3块皂(纯白+柠檬+芦荟)肥皂 洗去细菌99% 新旧包装随机",
    amount: 24.90,
    finish: true
  },
  {
    goodNO: 2,
    orderNo: "154615133114534135",
    date: "2023-07-28 21:15:16",
    goodsCover: "https://img13.360buyimg.com/n1/jfs/t1/138296/24/38090/145185/64c38c3aF568cba9c/32db385165ef0927.jpg",
    goodsName: "舒肤佳香皂 3块皂(纯白+柠檬+芦荟)肥皂 洗去细菌99% 新旧包装随机",
    amount: 24.90,
    finish: true
  },
  {
    goodNO: 3,
    orderNo: "154615133114534135",
    date: "2023-07-28 21:15:16",
    goodsCover: "https://img13.360buyimg.com/n1/jfs/t1/138296/24/38090/145185/64c38c3aF568cba9c/32db385165ef0927.jpg",
    goodsName: "舒肤佳香皂 3块皂(纯白+柠檬+芦荟)肥皂 洗去细菌99% 新旧包装随机",
    amount: 24.90,
    finish: true
  },
  {
    goodNO: 4,
    orderNo: "154615133114534135",
    date: "2023-07-28 21:15:16",
    goodsCover: "https://img13.360buyimg.com/n1/jfs/t1/138296/24/38090/145185/64c38c3aF568cba9c/32db385165ef0927.jpg",
    goodsName: "舒肤佳香皂 3块皂(纯白+柠檬+芦荟)肥皂 洗去细菌99% 新旧包装随机",
    amount: 24.90,
    finish: true
  },
  {
    orderNo: "154615133114534135",
    date: "2023-07-28 21:15:16",
    goodsCover: "https://img13.360buyimg.com/n1/jfs/t1/138296/24/38090/145185/64c38c3aF568cba9c/32db385165ef0927.jpg",
    goodsName: "舒肤佳香皂 3块皂(纯白+柠檬+芦荟)肥皂 洗去细菌99% 新旧包装随机",
    amount: 24.90,
    finish: true
  },
  {
    goodNO: 5,
    orderNo: "154615133114534135",
    date: "2023-07-28 21:15:16",
    goodsCover: "https://img13.360buyimg.com/n1/jfs/t1/138296/24/38090/145185/64c38c3aF568cba9c/32db385165ef0927.jpg",
    goodsName: "舒肤佳香皂 3块皂(纯白+柠檬+芦荟)肥皂 洗去细菌99% 新旧包装随机",
    amount: 24.90,
    finish: true
  },
  {
    goodNO: 6,
    orderNo: "154615133114534135",
    date: "2023-07-28 21:15:16",
    goodsCover: "https://img13.360buyimg.com/n1/jfs/t1/138296/24/38090/145185/64c38c3aF568cba9c/32db385165ef0927.jpg",
    goodsName: "舒肤佳香皂 3块皂(纯白+柠檬+芦荟)肥皂 洗去细菌99% 新旧包装随机",
    amount: 24.90,
    finish: true
  },
  {
    goodNO: 7,
    orderNo: "154615133114534135",
    date: "2023-07-28 21:15:16",
    goodsCover: "https://img13.360buyimg.com/n1/jfs/t1/138296/24/38090/145185/64c38c3aF568cba9c/32db385165ef0927.jpg",
    goodsName: "舒肤佳香皂 3块皂(纯白+柠檬+芦荟)肥皂 洗去细菌99% 新旧包装随机",
    amount: 24.90,
    finish: true
  },
  {
    goodNO: 8,
    orderNo: "154615133114534135",
    date: "2023-07-28 21:15:16",
    goodsCover: "https://img13.360buyimg.com/n1/jfs/t1/138296/24/38090/145185/64c38c3aF568cba9c/32db385165ef0927.jpg",
    goodsName: "舒肤佳香皂 3块皂(纯白+柠檬+芦荟)肥皂 洗去细菌99% 新旧包装随机",
    amount: 24.90,
    finish: true
  }
])
</script>
<style scoped>
ul,
li {
  list-style: none;
  padding: 0;
}

.order-list-container {
  margin-top: 8px;
  /* background-color: #E7CED2; */
  height: 100%;

}

.orderlist-container {
  height: 100%;
}
</style>
